import React, { useState, memo, useCallback, useMemo } from "react";
// memo是一个高阶组件，作用就相当于类组件的PureComponent

// useCallback用来缓存函数
// 如果一个函数需要作为自定义事件进行传递的时候，这个事件就应该使用useCallback

/*
  useMemo和useCallback能不能相互转换

  useMemo缓存的是函数的返回值
  useCallback缓存的是函数本身

  useCallback是可以转成useMemo的写法，需要函数外面套一层
  useMemo是不能改成useCallback的
*/

const Child = memo(() => {
  console.log("child render");
  return <div>child子组件</div>;
});

const App = () => {
  const [count, setCount] = useState(1);
  const [obj] = useState({ a: 3 });
  // const fn = useCallback(() => {
  //   console.log(123);
  // }, []);
  const fn = useMemo(
    () => () => {
      console.log(123);
    },
    []
  );
  return (
    <>
      <h2>useCallback</h2>
      <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>
      <Child name="zhangsan" obj={obj} onAbc={fn} />
    </>
  );
};

export default App;
